<template>
   <div>
      <CardBox :title="item.title" :icon="item.icon" v-for="(item,index) in data" :key="index" id="CardBox">
         <div slot="body">
             <button v-for="(btn,index) in  item.data" :key="index" class="button" :style="getStyle(item,btn)" @click="search_(item,btn)">
              {{btn.label}}
             </button>
         </div>
      </CardBox>
   </div>
</template>
<script>
import CardBox from '@/components/Package/CardBox/CardBox.vue'
import { mapActions, mapGetters, mapState } from 'vuex'
  export default 
  {
     components: { CardBox },
     name :'', 
     computed:{
       ...mapGetters('Init',['NewArticleTypeData']),
       ...mapState('Login',['User'])
     },
     created(){
        this.init()
        this.$bus.$on('searchType',type => this.searchType(type))
     },
     methods: {
         ...mapActions('Square',['GetSquareArticle']), //获取广场博客
        init(){
            this.data[1].data = this.NewArticleTypeData
            this.searchData.createdUid = this.User?.uid
        },
        getStyle(item,btn){
           if(item.default == btn.value)
           return{background:'var(--GeneralBackColor-half)',color:"white"}
        },
        search_(item,btn){

          if(item.default == btn.value) return
           item.default = btn.value
           this.searchData[item.name] = btn.value
           this.GetSquareArticle(this.searchData)
        },
        searchType(type){
           let typeData = this.data[1]
           if(typeData.default == type.id) return
            typeData.default = type.id

            this.searchData.type = type.id
            this.GetSquareArticle(this.searchData)
        }
     },
     data() {
      return {
         searchData:{},
         data:[
            {title:'分类',icon:'default/information/Fan.png',name:'classify',default:-1,data:[
               {label:'全部',value:-1},{label:'图文',value:1},{label:'视频',value:2},{label:'MD',value:3}]},
            {title:'类型',icon:'default/information/Pen.png',name:'type',default:-1,data:null},
            {title:'排序',icon:'default/information/Sort.png',name:'hot',default:-1,data:[
              {label:'最新',value:-1},{label:'最热',value:1}]},
         ]
      }
     },
  }
</script>
<style scoped lang='less'>
#CardBox{
   background:  var(--Pattern);
   opacity: 1;
}
.button{
   background: white;
   border-radius: 5px;
   padding: 3px 7px;
   margin: 5px;
   font-size: 16px;
}
</style>